<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10-ajax-test</title>
		<style>
		*{margin:0;padding:0;}
		div{
			width:300px;
			height:300px;
			border:1px solid #000;
			margin:50px auto;
			text-align:center;
			background:#ccc;
		}
		img
		{
			width:200px;
			height:200px;
			display:block;
			margin:10px auto 10px;
			border:1px solid #000;
			
		}
		p{
			text-align:center;
			background:pink;
			
		}
		
		</style>
		
		<script src="myAjax2.js"></script>
		
		<script type="text/javascript">
		
			window.onload = function(ev)
			{
				
				//1.获取需要设置的元素
				var oTitle = document.querySelector("#title");
				var oDes = document.querySelector("#des");
				
				var oImg = document.querySelector("#img");
				
				//2.获取所有的按钮
				var oBtns = document.querySelectorAll("button");
				
				//3.给按钮添加点击事件
				oBtns[0].onclick = function()
				{
					var self = this;
					//4.发送Ajax请求到服务器
					ajax(
					{
						type:"get",
						url:"10-ajax-test.php",
						data:{"name":this.getAttribute("name")},
						timeout:3000,
						success:function(xhr)
						{
							/*
							//alert(xhr.responseText);
							var res = xhr.responseText.split("|");
							console.log(res);
							oTitle.innerHTML = res[0];
							oDes.innerHTML = res[1];
							
							//setAttribute() 方法添加指定的属性，并为其赋指定的值。(需要设置的属性,要修改为的属性)
							oImg.setAttribute("src",res[2]);
							*/
						   
						   
						   /*
						    //XML方法
						    var name = self.getAttribute("name");
						    var res = xhr.responseXML;
						    var title = res.querySelector(name+">title").innerHTML;
						    var des = res.querySelector(name+">des").innerHTML;
						    var image = res.querySelector(name+">image").innerHTML;
						   
						    oTitle.innerHTML = title;
						    oDes.innerHTML = des;
						    oImg.setAttribute("src",image);
						    */
						   
						   //JSON方法 [能使用JSON尽量使用JSON，因为JSON体积比XML更小]
						    var name = self.getAttribute("name");
						    var str = xhr.responseText;
							//JSON.parse(); 将JSON转换为对象
						    var obj = JSON.parse(str);
						    //console.log(obj);
							var subObj = obj[name];
							console.log(subObj);
							
							oTitle.innerHTML = subObj.title;
							oDes.innerHTML = subObj.des;
							oImg.setAttribute("src",subObj.image);
						},
						error:function(xhr)
						{
							alert(xhr.status);
						}
						
					});
				};
				
				oBtns[1].onclick = function()
				{
					
				};
				
				
				oBtns[2].onclick = function()
				{
					
				};
				
		
			};
		
		</script>
		
	</head>
	<body>
		<div>
			<p id="title">商品标题名称</p>
			<img src="" alt="" id="img">
			<p id="des">商品描述信息</p>
			<button name="nz">女装</button>
			<button name="bb">包包</button>
			<button name="tx">拖鞋</button>
		</div>
	</body>
</html>
